<!--<template>
  <div>
    <h2 v-text="msg" ref="title"></h2>
    <button ref="btn" @click="showDom">点我输出Dom元素</button>
    <MySchool ref="school"/>
  </div>
</template>

<script>
import MySchool from "@/components/MySchool";
export default {
  name: "App",
  data(){
    return{
      msg:'欢迎学习Vue',
    }
  },
  components: {MySchool},
  methods:{
    showDom() {
      console.log(this.$refs.title)  //真实dom
      console.log(this.$refs.btn)   //真实dom
      console.log(this.$refs.school)  //MySchool组件实例对象（vc）
    }
  }
}
</script>

<style scoped>

</style>-->

<!--<template>
  <div>
    <MyStudent name="张三" sex="男" age="18"/>
    <hr>
    <MyTeacher name="李晓" sex="女" :age="20"/>
  </div>
</template>

<script>
import MyStudent from "@/components/MyStudent";
import MyTeacher from "@/components/MyTeacher";
export default {
  name: "App",
  components: { MyTeacher, MyStudent},
}
</script>-->

<!--<template>
  <div>
    <MySon />
    <MyFriend />
  </div>
</template>

<script>
import MySon from "@/components/MySon";
import MyFriend from "@/components/MyFriend";
export default {
  name: "App",
  components: {MyFriend, MySon},
}
</script>-->

<template>
  <div>
    <MyGrandma/>
    <MyGrandpa />
  </div>
</template>

<script>
import MyGrandma from "@/components/MyGrandma";
import MyGrandpa from "@/components/MyGrandpa";

export default {
  name: "App",
  components: {MyGrandpa, MyGrandma},
}
</script>
